import { Effects, Environment, OrbitControls } from "@react-three/drei";
import { Canvas, extend, useThree } from "@react-three/fiber";
import { SSAARenderPass } from "three/examples/jsm/postprocessing/SSAARenderPass.js";
import { Bloom, DepthOfField, EffectComposer, Noise, Vignette, SSAO } from "@react-three/postprocessing";
import { useEffect, useRef } from "react";
// import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import Scene from "./components/Scene";

import "./App.css";

extend({ SSAARenderPass });

function App() {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        if (canvasRef.current) {
            console.log(canvasRef);
        }
    }, []);

    return (
        <div className="w-screen h-screen">
            <Canvas ref={canvasRef} camera={{ position: [0, 103.911, 300.076] }}>
                <Environment files={["./env.hdr"]} />
                <OrbitControls />
                <Scene />
                <EffectComposer enableNormalPass>
                    <SSAO />
                </EffectComposer>
            </Canvas>
            <div></div>
        </div>
    );
}

export default App;
